<template>
  <div class="zw_mian">
    <div class="titel_text">展位信息确认</div>
    <div class="text_list">
      <div>
        注：请核对展位相关信息（面积尺寸、高度限制、设计方案开口消防要求）务必确定无误方可开始报图。
      </div>
      <div>如有问题请先联系施工安全管理（联系方式见首页联系主场）</div>
      <div style="color: #ff0000">报图截止时间：{{ endTime }}</div>
      <div style="color: #ff0000">
        请在报图截止时间之前提交报图资料，若超过截止时间提交，每个过审展位都将收取延时审图费用，请您知悉！
      </div>
    </div>
    <div class="zw_input_warp">
      <el-form
        :label-position="'left'"
        size="mini"
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="展位馆号:" prop="exNumber">
          <el-select
            v-model="ruleForm.exNumber"
            filterable
            clearable
            @change="changeExNumber"
          >
            <el-option
              v-for="item in exNumber"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展位号:" prop="name">
          <el-autocomplete
            v-model="test"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
            value-key="standNum"
            clearable
          ></el-autocomplete>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="wringdloag" class="text_wring">请输入有效的展位信息</div>
    <el-descriptions
      title="确认展位信息"
      direction="vertical"
      :column="4"
      border
    >
      <el-descriptions-item label="展馆号">{{
        stan.exNumber
      }}</el-descriptions-item>
      <el-descriptions-item label="展位号">{{
        stan.standNum
      }}</el-descriptions-item>
      <el-descriptions-item label="展位类型"
        ><el-tag size="small" v-if="stan.standType != null">{{
          stan.standType == "1" ? "特装" : "标展"
        }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="展位名称">{{
        stan.standName
      }}</el-descriptions-item>
      <el-descriptions-item label="展位面积" :span="2">{{
        stan.standArea
      }}</el-descriptions-item>
    </el-descriptions>
    <div class="but_warp">
      <el-button size="mini" @click="hanldpath('/drawingsBoothConfirm')"
        >返回</el-button
      >
      <el-button
        :disabled="butshow"
        size="mini"
        @click="hanldnext"
        type="danger"
        >下一步</el-button
      >
    </div>
  </div>
</template>
<script>
import {
  stand_infoid,
  stand_infolist,
  getExhibition_info,
  getStandInfo,
  verifyHasApply,
} from "@/api/outfit/drawingadd.js";
import { getToken, setToken } from "@/utils/auth";
import { removeToken } from "../../../../utils/auth";
export default {
  name: "Detail",
  dicts: ["sys_job_group", "sys_job_status"],
  data() {
    return {
      restaurants: [],
      test: "",
      ruleForm: {
        name: "",
      },
      stan: {},
      butshow: true,
      wringdloag: false,
      timeout: null,
      datafrom: {},
      exhibition: {},
      endTime: null,
      exNumber: [],
    };
  },
  activated() {
    this.getinputdata();
    this.ruleForm = {};
    this.test = ''
  },
  created(){
    this.getinputdata();
    this.ruleForm = {};
    this.test = ''
  },
  //缓存组件的页码退出时生效
  beforeDestroy() {
    console.log("缓存组件的页码退出时生效");
    this.$emit("deletenext", true);
  },
  //路由跳转时生效
  deactivated() {
    console.log("路由跳转时生效");
    this.ruleForm = {};
    this.test = ''
    this.$emit("deletenext", true);
  },
  methods: {
    // 获取远程搜索数据
    getinputdata() {
      this.exhibition = JSON.parse(getToken("exhibition"));
      console.log(this.exhibition);
      this.endTime = this.switchTimeFormat(this.exhibition.endTime2);
      this.datafrom.exhibitionId = this.exhibition.id;
      if (this.exhibition.exNumber != null) {
        this.exNumber = this.exhibition.exNumber.split(";");
      }
      this.getStandInfo();
    },
    switchTimeFormat(time) {
      const dateTime = new Date(time);
      const year = dateTime.getFullYear();
      const month = dateTime.getMonth() + 1;
      const date = dateTime.getDate();
      const hour = dateTime.getHours() + 17;
      const minute = dateTime.getMinutes();
      const second = dateTime.getSeconds();
      return `${year}-${this.addZero(month)}-${this.addZero(
        date
      )} ${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(second)}`;
    },
    addZero(v) {
      return v < 10 ? "0" + v : v;
    },
    changeExNumber() {
      this.datafrom.exNumber = this.ruleForm.exNumber;
      this.ruleForm.name = "";
      this.test = "";
      this.getStandInfo();
    },
    getStandInfo() {
      stand_infolist(this.datafrom).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.restaurants = res.rows;
        }
      });
    },
    // getExhibitionInfo() {
    //   getExhibition_info(this.exhibition.id).then((res) => {
    //     if (res.code == 200) {
    //       this.exhibitionInfo = res.rows;
    //       console.log(this.exhibitionInfo)
    //       this.exNumber = this.exhibitionInfo.exNumber.split(';');
    //     }
    //   })
    // },
    // 数据进行匹配
    querySearchAsync(queryString, cb) {
      console.log(queryString, this.ruleForm.name);
      // if(!queryString){
      //   return false
      // }
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      // if (results.length < 1) {
      //   return this.$message.error("用户暂未分配展位");
      // }
      cb(results);
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.standNum.indexOf(queryString) >= 0;
      };
    },
    hanldpath(path) {
      this.$router.push(path);
    },
    hanldnext() {
      this.$emit("hanldnext", 1);
    },
    handleSelect(val) {
      var standId = val.id;
      this.hanldquery(standId);
    },
    hanldquery(standId) {
      this.$refs.ruleForm.validate((valid) => {
        // this.butshow = false
        if (valid) {
          getStandInfo(standId).then((res) => {
            if (res.code == 200) {
              if (res.total == 0) {
                this.wringdloag = true;
              } else {
                this.wringdloag = false;
                this.stan = res.data;
                verifyHasApply(standId).then((res) => {
                  if (res.code == 200) {
                    setToken("stanId", this.stan.id);
                    setToken("stan", null);
                    this.butshow = false;
                  }
                });
              }
            }
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.zw_mian {
  padding: 30px;
}
.titel_text {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.text_list {
  margin: 20px 0;
  line-height: 30px;
  font-size: 14px;
  color: #666;
}
.zw_input_warp {
  display: flex;
  justify-content: center;
}
.zw_data {
  width: 130px;
  margin-left: 40px;
}
.zw_for {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 20px;
}
.zw_for_label {
  color: #666;
  white-space: nowrap;
}
.but_warp {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.text_wring {
  color: #ff0000;
  font-size: 14px;
  text-align: center;
}
</style>